<template>
  <div class="flex font-14 btn-group-box">
    <span v-for="(item, index) of stateBtnList" :key="index" :class="curBtnIndex === index ? 'active-btn':'disactive-btn'" class="btn-box cursor-p flex flex-center" @click="changeState(index)">{{ item }}</span>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, ref } from 'vue'

export default defineComponent({
  setup() {
    const curBtnIndex = ref(inject('platformOrderStatus'))
    const stateBtnList:string[] = ['已同步', '待发货', '部分发货', '已发货', '售后中', '已完成', '已退款']
    const changeState = (index:number):void => {
      curBtnIndex.value = index
      console.log(curBtnIndex)
    }
    return {
      stateBtnList,
      curBtnIndex,
      changeState
    }
  }
})
</script>

<style lang="scss" scoped>
.btn-group-box {
  &>.btn-box:not(:first-child) {
    margin-left: -1px;
  }
}
.btn-box {
  padding: 13px 26px 13px 26px;
  border: 1px solid #DDDFE7;
}
.active-btn {
  color: #409EFF;
  background: #fff;
  border-bottom: none;
}
.disactive-btn {
  color: #323233;
  background: #F5F7FB;
}
</style>
